import React from 'react';
import { connect } from 'dva'

import Title from 'components/Title'
import Chart from 'components/Chart'

import Tools from 'utils/tools';

@connect(({ hotline }) => ({ ...hotline }))
class Statistics extends React.Component {
  echartsConf = [
    {
      key: 'rxqk',
      label: '热线情况分析',
      chart: {
        type: 'Common', dataSource: 'GetStatisticsResource1',
        columns: {
          seriesItems: [
            { name: '热线数量', field: 'val', type: 'bar', style: 'areaStyle' },
            // { name: '环比', field: 'rate1', type: 'line', yAxisIndex: 1 },
            // { name: '同比', field: 'rate2', type: 'line' },
          ],
          xAxis: { field: 'time', format: 'M月' },
          yAxis: [{ name: '个' }],
        },
        other: { showLegend: false },
      },
      server: { type: 'hotline/queryGetStatistics', payload: { type: 1  }},
    },
    {
      key: 'rxzb',
      label: '热线占比情况',
      chart: {
        type: 'Pie', dataSource: 'AnalysisResource1',
        other: { radius: ['0%', '60%'], formatType: 'onlyPercent' },
        columns: {
          name: '',
          field: [{ name: 'title', value: 'val' }]
        }
      },
      server: { type: 'hotline/queryAnalysis', payload: { type: 1 } },
    },
    {
      key: 'gdwcl',
      label: '热线工单完成率',
      chart: {
        type: 'Common', dataSource: 'StatisticsResource4',
        columns: {
          seriesItems: [
            { name: '热线数量', field: 'total', type: 'bar', style: 'areaStyle' },
            { name: '完成工单数量', field: 'ok', type: 'bar' },
            { name: '工单完成率', field: 'rate', type: 'line', yAxisIndex: 1 },
          ],
          xAxis: { field: 'time', format: 'M月' },
          yAxis: [{ name: '个' }, { name: '%' }],
        },
        color: ['68, 130, 255', '134, 147, 243', '252, 228, 134'],
        other: { showLegend: true },
      },
      server: { type: 'hotline/queryStatistics', payload: { type: 4 } },
    },
    {
      key: 'fylb',
      label: '反映类别',
      chart: {
        type: 'Pie', dataSource: 'AnalysisResource2',
        other: { radius: ['0%', '60%'], formatType: 'onlyPercent' },
        columns: {
          name: '', field: [{ name: 'title', value: 'val' }]
        }
      },
      server: { type: 'hotline/queryAnalysis', payload: { type: 2 } },
    },
    {
      key: 'yhts',
      label: '用户投诉情况',
      chart: {
        type: 'Bar', dataSource: 'StatisticsResource5',
        color: ['#aa81f3'],
        columns: {
          seriesItems: [
            { name: '用户投诉', field: 'total' },
          ],
          xAxis: { field: 'time', format: 'M月' },
          yAxis: { name: '个' },
        }
      },
      server: { type: 'hotline/queryStatistics', payload: { type: 5 } },
    },
    {
      key: 'sjsb',
      label: '用户投诉占比分析',
      chart: {
        type: 'Pie', dataSource: 'AnalysisResource3',
        other: { radius: ['0%', '60%'], formatType: 'onlyPercent' },
        columns: {
          name: '',
          field: [{ name: 'title', value: 'val' }]
        }
      },
      server: { type: 'hotline/queryAnalysis', payload: { type: 3 } },
    }
  ];

  constructor(props) {
    super(props);

    let time;
    if ('defaultValue' in props) {
      time = props.defaultValue;
    }
    this.state = {
      time,
    };
  }

  componentDidMount() {
    this.init();
  }

  init = async () => {
    await this.setDateECharts()
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.defaultValue !== nextProps.defaultValue) {
      if (nextProps.defaultValue) {
        this.setState({
          time: nextProps.defaultValue
        }, () => {
          this.init()
        })
      }
    }
  }

  // 图表
  setDateECharts = () => {
    const { echartsConf } = this;
    echartsConf.forEach(ele => {
      const { server } = ele;
      if (server) this.queryECharts(server);
    })
  }
  // 处理echarts配置请求
  queryECharts = async (server) => {
    const { time } = this.state;
    let { payload, type } = server;
    if(type === 'hotline/queryGetStatistics'){
      Object.assign(payload, {
        timeBegin: `${time}-01-01`,
        timeEnd: `${time}-12-31`,
        timeType: 1,
      })
    }else{
      Object.assign(payload, { time })
    }
    Object.assign(server, { payload })
    await this.props.dispatch(server);
  }

  // 图表渲染
  render() {
    const { props, state, echartsConf } = this;
    const { time: year } = state;

    let charts = null;
    charts = echartsConf.map(ele => {
      const { key, label, chart, extra, server } = ele;
      const { type: chartType, dataSource, columns, color, other } = chart;
      
      let dataResource = props[dataSource];
      if(server.type === 'hotline/queryGetStatistics'){
        dataResource = Tools.statisticsFormat(props[dataSource], year)
      }
      return (
        <Title key={key} title={label}>
          <Chart
            type={chartType}
            color={color}
            columns={columns}
            dataSource={dataResource}
            extra={extra}
            other={other}
          />
        </Title>
      )
    })
    return <>{charts}</>
  }
}

export default Statistics;
